<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🧚‍♀️ AI童话书</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .story-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border-left: 5px solid #ff6b6b;
        }
        
        .story-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .story-content {
            font-size: 1.1em;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
        }
        
        .choices {
            margin-top: 20px;
        }
        
        .choice-btn {
            display: block;
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .choice-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .controls {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .btn {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 1em;
            cursor: pointer;
            margin: 5px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        .hidden {
            display: none;
        }
        
        @media (max-width: 600px) {
            .header h1 {
                font-size: 2em;
            }
            
            .content {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🧚‍♀️ AI童话书</h1>
            <p>创造属于你的奇幻故事</p>
        </div>
        
        <div class="content">
            <div class="controls">
                <button class="btn" onclick="generateNewStory()">🎭 生成新故事</button>
                <button class="btn" onclick="showTemplates()">📋 故事模板</button>
            </div>
            
            <div id="loading" class="loading hidden">
                <p>🎪 正在创造魔法故事...</p>
            </div>
            
            <div id="story-container">
                <div class="story-section">
                    <div class="story-title">欢迎来到AI童话世界！</div>
                    <div class="story-content">
                        点击"生成新故事"开始你的奇幻冒险之旅。每个故事都是独一无二的，
                        你的选择将决定故事的发展方向。准备好了吗？
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentStory = null;
        
        function showLoading() {
            document.getElementById('loading').classList.remove('hidden');
        }
        
        function hideLoading() {
            document.getElementById('loading').classList.add('hidden');
        }
        
        function generateNewStory() {
            showLoading();
            
            // 模拟API调用
            setTimeout(() => {
                const stories = [
                    {
                        title: "魔法森林的冒险",
                        content: "在一个神秘的魔法森林里，住着一只聪明的小兔子。有一天，小兔子发现了一个闪闪发光的水晶球...",
                        choices: [
                            {text: "拿起这个神奇的物品", next: "pickup"},
                            {text: "小心地观察周围", next: "observe"},
                            {text: "寻找其他动物朋友", next: "friends"}
                        ],
                        characters: {animal: "小兔子", object: "水晶球"}
                    },
                    {
                        title: "海底世界探险",
                        content: "在深蓝色的海底，小海豚游过了美丽的珊瑚礁。突然，小海豚看到了一座神秘的古堡...",
                        choices: [
                            {text: "游向神秘的建筑", next: "explore"},
                            {text: "和海洋朋友们商量", next: "discuss"},
                            {text: "寻找宝藏线索", next: "treasure"}
                        ],
                        characters: {animal: "小海豚", object: "古堡"}
                    }
                ];
                
                currentStory = stories[Math.floor(Math.random() * stories.length)];
                displayStory(currentStory);
                hideLoading();
            }, 1000);
        }
        
        function displayStory(story) {
            const container = document.getElementById('story-container');
            
            let choicesHtml = '';
            if (story.choices && story.choices.length > 0) {
                choicesHtml = '<div class="choices">';
                story.choices.forEach((choice, index) => {
                    choicesHtml += `<button class="choice-btn" onclick="makeChoice('${choice.next}')">${choice.text}</button>`;
                });
                choicesHtml += '</div>';
            }
            
            container.innerHTML = `
                <div class="story-section">
                    <div class="story-title">${story.title}</div>
                    <div class="story-content">${story.content}</div>
                    ${choicesHtml}
                </div>
            `;
        }
        
        function makeChoice(choiceId) {
            showLoading();
            
            // 模拟故事继续
            setTimeout(() => {
                const continuations = {
                    "pickup": "当小兔子触碰到水晶球时，突然间整个森林都亮了起来！原来这是一个魔法水晶球，它能够实现愿望...",
                    "observe": "小兔子仔细观察后发现，这个水晶球周围有很多小脚印，看起来其他小动物也来过这里...",
                    "friends": "小兔子呼唤朋友们，很快小松鼠、小鹿都跑了过来，大家一起看着这个神奇的水晶球...",
                    "explore": "小海豚勇敢地游向古堡，发现这是一座古老的海底宫殿，里面传来美妙的音乐声...",
                    "discuss": "海龟爷爷告诉小海豚，这座古堡里住着善良的海洋精灵，她会帮助迷路的小动物...",
                    "treasure": "小海豚在古堡附近发现了一张古老的藏宝图，上面画着通往神秘宝藏的路线..."
                };
                
                const continuation = {
                    title: currentStory.title + " - 故事继续",
                    content: continuations[choiceId] || "故事还在继续...",
                    choices: [
                        {text: "继续探索", next: "continue"},
                        {text: "寻求帮助", next: "help"},
                        {text: "回到开始的地方", next: "return"}
                    ]
                };
                
                displayStory(continuation);
                hideLoading();
            }, 800);
        }
        
        function showTemplates() {
            const container = document.getElementById('story-container');
            container.innerHTML = `
                <div class="story-section">
                    <div class="story-title">📋 故事模板</div>
                    <div class="story-content">
                        <p><strong>1. 魔法森林的冒险</strong><br>
                        在神秘的魔法森林中探索，遇见各种奇幻生物和魔法物品。</p>
                        
                        <p><strong>2. 海底世界探险</strong><br>
                        潜入深海，探索海底宫殿，寻找传说中的宝藏。</p>
                        
                        <p><strong>3. 太空星际旅行</strong><br>
                        乘坐宇宙飞船，探索未知星球，结识外星朋友。</p>
                        
                        <p><strong>4. 古代王国传说</strong><br>
                        回到古代王国，成为勇敢的骑士或聪明的公主。</p>
                    </div>
                    <div class="choices">
                        <button class="choice-btn" onclick="generateNewStory()">🎭 开始新冒险</button>
                    </div>
                </div>
            `;
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🧚‍♀️ AI童话书已加载完成！');
        });
    </script>
</body>
</html>